<template>
  <div>
    <h1>注册(*¯︶¯*)</h1>
    <div style="padding-left: 400px;padding-top: 10px">
      <el-row>
        <el-col :span="16"><div class="grid-content bg-purple-dark">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-for="(o,index) in sexData" :label="o.sysName" :key="o.id" v-model="form.sex">{{o.sysName}}</el-radio>
            </el-form-item>
            <el-form-item label="爱好">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-model="form.hobbyId" v-for="(o,index) in hobbys" :label="o.id" :key="o.id">{{o.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="岗位">
              <el-checkbox-group v-model="form.posts">
                <el-checkbox-button v-for="(o,index) in PostData" :label="o.id" :key="o.id">{{o.name}}</el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="头像">
              <el-upload
                  class="avatar-uploader"
                  :action="action"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="form.avatar" :src="form.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <div class="block">
                <el-cascader
                    v-model="form.addr"
                    :options="options"
                    @change="handleChange"
                    :props="{ expandTrigger: 'hover',value:'name',label:'name' }">
                </el-cascader>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addLogin">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
//const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {
  name: "RegisterView",
  data(){
    return{
      options:[],
      form:{
        hobbyId:[],
        avatar:'',
        posts:[]
      },
      checkAll: false,
      checkedCities: [],
      hobbys: [],
      isIndeterminate: true,
      action:'http://172.20.10.5:8003/api/tb-user/upload',
      value:[],
      PostData:[],
      sexData:[]
    }
  },methods:{
    handleChange(value) {
      console.log(value);
    },
    handleCheckAllChange(val) {
      let checked = this.hobbys.map(item => {
        return item.id;
      });
      this.checkedCities = val ? checked : [];
      this.isIndeterminate = false;
      alert(this.checkedCities)
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.hobbys.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.hobbys.length;
    },
    hobbyList(){
      this.axios.post("http://172.20.10.5:8003/api/tb-hobby/hobbyList").then(res=>{
          this.hobbys=res.data
          console.log(this.hobbys)
          //this.checkedCities=res.data
      })
    },
    addLogin(){
      this.form.hobbyId=this.checkedCities
      console.log(this.form);
      this.axios.post("http://172.20.10.5:8003/api/tb-user/addLogin",this.form).then(res=>{
        if(res.data=='success'){
          this.$message.success("添加成功");
          this.$router.push("/");
        }
      })
    },handleAvatarSuccess(res) {
      this.form.avatar=res
    },postList(){
      this.axios.post("http://172.20.10.5:8003/api/tb-post/postList").then(res=>{
        this.PostData=res.data;
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },addrList(){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/districtList2").then(res=>{
        console.log("pppppp======="+res.data);
        this.options=res.data
      })
    },sexList(){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/sexList").then(res=>{
        this.sexData=res.data;
        //alert(this.form.sex)
      })
    }
  },created() {
    this.hobbyList();
    this.addrList();
    this.postList();
    this.sexList();
  }
}
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>